<!-- 个人中心 -->
<template>
	<view class="personal-wrap" style="position: relative;">

		<view class="left">
			<view class="u-avatar-wrap" @click="chooseAvatar">
				<image class="u-avatar-demo" :src="user.avatar" mode="aspectFill"></image>
			</view>
			<!-- <view class="head-img"> -->
			<!-- <image
              mode="aspectFill"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.qtx.com%2Fasset%2F9e%2F65%2F4e%2Fbbf7aa7d2d82c1bfea858f653faf3f10.jpg&refer=http%3A%2F%2Fimg.qtx.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659873725&t=cdcf4317e37816056a18f9c838a4bb20"
            > -->

			<!-- </image> -->
			<!-- </view> -->

		</view>
		<view class="portrait">点击更换头像</view>
		<view style="margin-top: 20rpx;">
			<view>
				<view style="display: flex;position: relative;">
					<view class="title">昵称</view>
					<!-- <view class="name">{{userinfo.nickname}}</view> -->
					<input class="nickname" v-model="nickname"></input>
					<view class="jiantou">
						<image style="width: 16rpx;height: 28rpx;" src="../../static/images/Vector.png"></image>
					</view>
				</view>

			</view>
			<view class="br"></view>
			<view style="margin-top: 20rpx;">
				<view style="display: flex;position: relative;" @click="selectSex">
					<view class="title">性别</view>
					<view class="name">{{gender | sex}}</view>
					<view class="jiantou">
						<image style="width: 16rpx;height: 28rpx;" src="../../static/images/Vector.png"></image>
					</view>
				</view>

			</view>
			<view class="br"></view>
			<view style="margin-top: 20rpx;">
				<view style="display: flex;position: relative;">
					<view class="title">手机号</view>
					<!-- <view class="name">{{userinfo.mobile}}</view> -->
					<input class="nickname" style="color: #ccc" disabled v-model="mobile"></input>
					<view class="jiantou">
						<image style="width: 16rpx;height: 28rpx;" src="../../static/images/Vector.png"></image>
					</view>
				</view>

			</view>
			<view class="br"></view>
			<view style="margin-top: 20rpx;" @click="handleAuth">
				<view style="display: flex;position: relative;">
					<view class="title">实名认证</view>
					<view class="name">{{realname?"已认证": '无'}}</view>
					<view class="jiantou">
						<image style="width: 16rpx;height: 28rpx;" src="../../static/images/Vector.png"></image>
					</view>
				</view>

			</view>
			<view class="br"></view>
			<view class="submit" @click="submit">确定</view>
			<u-select v-model="show" :list="sexlist" @confirm='confirm'></u-select>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import {
		BASE_URL
	} from '../../env.js'

	export default {
		filters: {
			sex(val) {
				let data = ['男', '女']
				return data[val]
			}
		},
		data() {
			return {
				userinfo: '',
				nickname: '',
				gender: '',
				mobile: '',
				avatar: '',
				realname: '',
				show: false,
				sexlist: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					}
				],
				user: {}
			};
		},
		onLoad() {},
		async onShow() {
			await this.userInfoObject()
		},
		created() {
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				this.avatar = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: BASE_URL + '/api/common/upload',
					filePath: path,
					name: 'file',
					complete: (res) => {
						console.log(JSON.parse(res.data));
						let data = JSON.parse(res.data)
						this.avatar = data.data.url
						this.submit()
					}
				});
			})
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'logout']),
			// 用户信息
			userInfoObject() {
				this.getUserInfo(uni.getStorageSync('token')).then(res => {
					this.user = res
					console.log('user', this.user)
					this.nickname = this.user.nickname
					this.gender = this.user.gender
					this.mobile = this.user.mobile
					this.realname = this.user.realname
				})
			},
			selectSex() {
				this.show = true
			},
			confirm(e) {
				console.log(e);
				this.gender = e[0].value
			},
			handleAuth() {
				uni.navigateTo({
					url: `/pages/index/auth`
				});
			},
			async submit() {
				let data = {
					nickname: this.nickname,
					gender: this.gender,
					mobile: this.mobile,
					avatar: this.avatar,
					payimg: '',
				}
				await this.$https('my.profile', data).then(res => {
					uni.showToast({
						title: '保存成功',
						duration: 1000,
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				})
				this.userInfoObject()
			},
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
		},
	}
</script>
<style>
	page {
		height: 100%;
		background: #ffffff !important;
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;

	}

	.personal-wrap {
		padding-bottom: 100rpx;

		.left {
			justify-content: center;
			display: flex;
			color: #fff;
			margin-top: 42rpx;

			.u-avatar-wrap {
				margin-top: 80rpx;
				overflow: hidden;
				// margin-bottom: 80rpx;
				text-align: center;

				.u-avatar-demo {
					width: 150rpx;
					height: 150rpx;
					border-radius: 100rpx;
				}
			}

			.head-img {
				width: 160rpx;
				height: 160rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 25rpx;
			}
		}

		.xiangji {
			width: 160rpx;
			height: 160rpx;
			border-radius: 80rpx;
			position: absolute;
			// margin-left: 176px;
			// margin-top: 31px;
			// margin-top: 96rpx;
			z-index: 999;
		}

		.portrait {
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.br {
			border: 1px solid #F3F3F3;
			margin-left: 24rpx;
			margin-right: 24rpx;
		}

		.title {
			margin-left: 24rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 84rpx;
		}

		.nickname {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 84rpx;
			position: absolute;
			right: 82rpx;
			text-align: right;
			margin-top: 20rpx;
		}

		.name {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 84rpx;
			position: absolute;
			right: 82rpx;
			text-align: right;
			// margin-top: 20rpx;
		}

		.submit {
			width: 343px;
			height: 49px;
			background: linear-gradient(90deg, #FC5351 0%, #FF6E6D 100%);
			border-radius: 37px 37px 37px 37px;
			opacity: 1;
			margin: 108rpx auto;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			color: white;
		}

		.jiantou {
			position: absolute;
			right: 40rpx;
			top: 28rpx;
			//     color:#999999;
			//      line-height: 84rpx;
			//     position: absolute;
			//         right: 24rpx;
		}
	}
</style>
